<template>
  <el-card class="box-card">
    <!-- 按钮选择框 -->
    <el-row type="flex" justify="space-between" align="middle">
      <el-form
        ref="infoForm"
        label-width="80px"
        :inline="true"
        :model="cataInfoForm"
      >
        <el-form-item prop="directory_name">
          <el-input
            v-model="cataInfoForm.directory_name"
            placeholder="目录名称"
          />
        </el-form-item>
        <el-form-item prop="subject_id">
          <el-select v-model="cataInfoForm.subject_id" placeholder="归属学科">
            <el-option
              v-for="item in subject_names"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="is_show">
          <el-select v-model="cataInfoForm.is_show" placeholder="显示状态">
            <el-option label="显示" value="1" />
            <el-option label="隐藏" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchBtn">搜索</el-button>
          <el-button @click="reSet">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        plain
        class="nowNew"
        @click="todoCreate"
      >立即创建</el-button>
    </el-row>
    <!-- 表格 -->
    <el-table :data="cataData" border style="width: 100%">
      <el-table-column label="序号" width="180" type="index" align="center" />
      <el-table-column prop="id" label="目录ID" width="180" align="center" />
      <el-table-column
        prop="directory_name"
        label="目录名称"
        width="180"
        align="center"
      />
      <el-table-column label="目录图标" width="180" align="center">
        <template slot-scope="{ row }">
          <div>
            <span v-if="row.directory_icon === ''">暂无</span>
            <div v-else>
              <img
                :src="`http://122.51.249.55:7005/${row.directory_icon}`"
                style="width:80px;height:80px"
              >
            </div>
          </div>
        </template> </el-table-column>
      <el-table-column
        prop="subject_name"
        label="归属学科"
        width="180"
        align="center"
      />
      <el-table-column
        prop="username"
        label="创建人"
        width="180"
        align="center"
      />
      <el-table-column
        label="是否显示"
        width="180"
        prop="is_show"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-switch
            :value="row.is_show"
            :active-value="1"
            :inactive-value="2"
            inactive-text="否"
            @change="switchState(row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="tag_num"
        label="标签数量"
        width="180"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-link type="primary" @click="pushToTag(row.subject_id,row.id,row.directory_name)">
            <span :class="row.tag_num !== 0 ? 'numStyle' : 'whiteStyle'">{{
              row.tag_num
            }}</span>
            <span
              v-show="row.tag_num !== 0"
            ><i
              class="el-icon-link"
              style="color:#409eff;"
            /></span>
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            circle
            @click="editCata(row.id)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            circle
            @click="delCata(row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-pagination
        background
        layout="total,prev,pager,next,sizes"
        :current-page="page.page"
        :page-size="page.limit"
        :total="page.total"
        :page-sizes="[1,3,5,10]"
        @current-change="changePage"
        @size-change="changeSize"
      />
    </el-row>
    <!-- 立即创建的弹框 -->
    <addCataInfo
      ref="addCataInfo"
      :add-subject-name="subject_names"
      @updateCata="updateCata"
    />
  </el-card>
</template>

<script>
import {
  getCataInfo,
  switchState,
  getCataTree,
  delCataInfo
} from '@/api/cataInfo'
import addCataInfo from './components/addCataInfo.vue'
export default {
  name: 'CateInfo',
  components: {
    addCataInfo
  },
  data() {
    return {
      loading: false,
      cataData: [],
      // 图标的显示
      showPictureDialog: false,
      // 页面数据
      page: {
        page: 1, // 当前页码
        limit: 10,
        total: 0 // 总数
      },
      // 获取目录信息列表需要发送的参数
      cataParams: {
        subject_id: '',
        directory_name: '',
        is_show: '',
        page: 1,
        limit: 10,
        directory_id: ''
      },
      // 查询携带的参数
      cataInfoForm: { directory_name: '', is_show: '', subject_id: '' },
      btnState: '',
      subject_names: []
    }
  },

  mounted() {},
  created() {
    this.getCataInfo()
    this.getCataTree()
    this.getPush()
  },
  methods: {
    // 获取目录信息列表
    async getCataInfo() {
      this.loading = true
      const { data } = await getCataInfo(this.page)
      this.cataData = data.list
      // 将返回的数据条数给limit
      console.log(data)
      this.page.total = data.total
      this.page.limit = data.limit
      this.loading = false
    },
    // 获取归属学科的下拉框
    async getCataTree() {
      const { data } = await getCataTree()
      // console.log(data)
      this.subject_names = data
    },
    // 改变当前页码1.2.3
    changePage(newPage) {
      this.page.page = newPage
      this.getCataInfo()
    },
    // 改变每页显示的数量10.20.30
    changeSize(value) {
      this.page.limit = value
      this.getCataInfo()
    },
    // 重置查询条件
    reSet() {
      this.cataInfoForm = {}
      this.getCataInfo()
    },
    // 切换是否显示的状态
    async switchState(row) {
      var num = row.is_show * 1 === 1 ? 2 : 1
      await switchState({ id: row.id, is_show: row.state })
      row.is_show = num
      this.$message.success('切换成功')
    },
    // 立即创建
    async  todoCreate() {
      await this.$nextTick(function() {
        this.$refs.addCataInfo.handleRemove()
      })
      this.$refs.addCataInfo.showCataDialog = true
    },
    // 搜索功能
    async searchBtn() {
      const { data } = await getCataInfo({
        subject_id: this.cataInfoForm.subject_id,
        directory_name: this.cataInfoForm.directory_name,
        is_show: this.cataInfoForm.is_show,
        page: this.cataParams.page,
        limit: this.cataParams.limit
      })
      // 查询成功之后重新赋值
      this.cataData = data.list
    },
    // 触发子组件的添加功能
    updateCata() {
      this.getCataInfo()
    },
    // 删除目录信息
    async delCata(id) {
      try {
        console.log('删除按钮')
        await this.$confirm('确定删除该条信息吗？')
        await delCataInfo(id)
        if (this.cataData.length === 1 && this.page.page !== 1) {
          this.page.page--
        }
        this.$message.success('删除用户成功')
        this.getCataInfo()
      } catch (err) {
        console.log(err)
      }
    },
    // 编辑按钮
    editCata(id) {
      // console.log(id)
      this.$refs.addCataInfo.showCataDialog = true
      this.$refs.addCataInfo.getSingleCata(id)
      this.$refs.addCataInfo.fileList = [{ name: 'previewImg', url: '' }]
    },
    // 点击跳转进行筛选
    getPush() {
      // console.log('跳转')
      this.cataInfoForm.subject_id = this.$route.query.id
      // console.log(this.cataInfoForm.subject_id)
      this.searchBtn(this.$route.query.id)
    },
    // 点击图标实现跳转到标签信息
    pushToTag(id1, id2, dname) {
      console.log(id1)
      this.$router.push({ path: 'tag', query: { subject_id: id1, directory_id: id2 }})
      // console.log(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.numStyle {
  font-weight: 500;
  color: #409eff;
}
.whiteStyle {
  color: #c1c1c1;
}
::v-deep .el-dialog__header{
  background: #66b1ff;
  padding: 20px 20px 10px;
}
</style>
